<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tzhang" uri="http://www.elife.com/qingsheng" %>

<%--
  Created by IntelliJ IDEA.
  User: 11597
  Date: 2020/5/12
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/pharmacy/css/iconfont.css">
    <link rel="stylesheet" href="/pharmacy/css/global.css">
    <link rel="stylesheet" href="/pharmacy/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/pharmacy/plugins/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/pharmacy/css/styles.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/favorite.css"/>
    <script src="/pharmacy/plugins/jquery/jquery-3.4.1.js" charset="UTF-8"></script>
    <script src="/pharmacy/plugins/bootstrap/js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="/pharmacy/js/global.js" charset="UTF-8"></script>
    <script src="/pharmacy/js/alert.min.js" charset="UTF-8"></script>
</head>
<body>


<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="user-content__box clearfix bgf">
            <div class="title">购物车</div>
            <div id="form1" class="shopcart-form__box">

                <c:if test="${totalPrice>0}">
                    <table class="table table-bordered" style="vertical-align:middle;text-align:center" id="cart">
                        <thead>
                        <tr>
                            <th width="100" style="font-size: small"><span>&nbsp;&nbsp;</span><input type="checkbox" id="box" onclick="my()" checked><span id="as">&nbsp;取消全选</span></th>
                            <th width="100" style="text-align: center">商品图</th>
                            <th width="250" style="text-align: center">商品信息</th>
                            <th width="150" style="text-align: center">单价</th>
                            <th width="200" style="text-align: center">数量</th>
                            <th width="150" style="text-align: center">总价</th>
                            <th width="130" style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <c:forEach var="cartsInfo" items="${cartsInfoList}">

                            <tr id="tr_${cartsInfo.id}" class="gwc_actual_z"  >
                                <td style="vertical-align:middle;text-align: left">
                                    <span>&nbsp;&nbsp;</span><input type="checkbox" id="inlineCheckbox${cartsInfo.goodId}" name="box1" value="${cartsInfo.goodId}" checked onchange="checkbox(this)">
                                </td>
                                <td scope="row" style="vertical-align:middle;text-align:center">
                                    <label class="checked-label">
                                        <a href="detail?goodId=${cartsInfo.goodId}"><img style="height: 100px;width: 100px" src="/pharmacy/${cartsInfo.goodImages}" alt="" class="cover"></a>
                                    </label>
                                </td>
                                <td style="vertical-align:middle;text-align:center">
                                    <div class="name ep3" style="padding-top: 25px;">${cartsInfo.goodName}</div>
                                </td>
                                <td style="vertical-align:middle;text-align:center">¥<span id="price_${cartsInfo.id}">${cartsInfo.goodPrice}</span></td>
                                <td style="vertical-align:middle;text-align:center">
                                    <div class="cart-num__box">
                                        <input class="sub" value="-" onclick="less(${cartsInfo.id})" type="button">
                                        <input class="val" id="amount_${cartsInfo.id}" value="${cartsInfo.goodNum}" type="text" readonly="readonly" onkeyup="this.value=this.value.replace(/\D/g,'')">
                                        <input class="add" value="+" onclick="add(${cartsInfo.id})" type="button">
                                    </div>
                                </td>
                                <td style="vertical-align:middle;text-align:center">¥<span id="total_${cartsInfo.id}">${tzhang:countMulti(cartsInfo.goodPrice, cartsInfo.goodNum)}</span></td>
                                <td style="vertical-align:middle;text-align:center"><a href="javascript:;" onclick="ConfirmDelete(${cartsInfo.id});">删除</a></td>
                            </tr>

                        </c:forEach>

                        </tbody>
                    </table>
                </c:if>

                <c:if test="${totalPrice<=0}">
                    <div class="none">
                        <img src="../images/收藏.png" alt="图片加载失败">
                        <div class="body-info">
                            购物车中未添加宝贝哦！快去 <a href="http://localhost:8888/pharmacy/home/page" style="color: red">逛逛</a> 吧
                        </div>
                    </div>
                </c:if>
                <div class="user-form-group tags-box shopcart-submit pull-right">
                    <c:if test="${totalPrice > 0}">
                        <button  class="btn" id="jiesuan" onclick="submit()">提交订单</button>
                    </c:if>
                </div>
                <c:if test="${totalPrice>0}">
                    <div class="checkbox shopcart-total" style="margin-top: 32px;">
                        <div class="pull-right">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b31e22">合计 </span><b class="cr">¥ <span class="fz24" id="totalprice">${totalPrice}</span></b>
                        </div>
                    </div>
                </c:if>
            </div>
        </div>
    </section>
</div>


<script type="text/javascript">
    function add(skuid){
        $.post("add", {skuid:skuid}, function(data){
            if(data){
                var amount = parseInt($('#amount_'+skuid).val()) + 1;
                $('#amount_'+skuid).val(amount);
                var price = parseFloat($('#price_'+skuid).text());
                $('#total_'+skuid).text(accMul(price,amount));
                reloadTotal(); // 更新总金额
            }
        });
    }
    function less(skuid){
        var amount = parseInt($('#amount_'+skuid).val())
        if(amount <= 1){ // 数量减没了就删掉
            alert("商品最少为1个")
            return
        }
        $.post("less", {skuid:skuid}, function(data){
            if(data){
                amount = amount - 1;
                $('#amount_'+skuid).val(amount);
                var price = parseFloat($('#price_'+skuid).text());
                $('#total_'+skuid).text(accMul(price,amount));
                reloadTotal(); // 更新总金额
            }
        });
    }

    function ConfirmDelete(skuid){
        var a = confirm("是否确定删除？")
        if(a == true){
            del(skuid)
        }
    }

    function del(skuid){
        $.post("delete", {skuid:skuid}, function(data){
            if(data){
                $('#tr_'+skuid).fadeOut(500, function(){
                    $('#tr_'+skuid).remove()
                });
                reloadTotal(); // 更新总金额
            }
        });
    }


    // 刷新总金额
    function reloadTotal(){
        var tb = $("#cart")[0]
        var rows = tb.rows.length
        var total = parseFloat("0.0");
        var iss=document.getElementsByName('box1');
        for (var i = 1; i < rows; i++) {
            {
                if(iss[i-1].checked==true){
                    total = total + parseFloat(tb.rows[i].cells[5].getElementsByTagName('span')[0].innerText)
                }
            }
        }
        total = total.toFixed(2)
        $("#totalprice").text(total)
        console.log(total)

    }



    function accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
        try { m += s1.split(".")[1].length } catch (e) { }
        try { m += s2.split(".")[1].length } catch (e) { }
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
    }

    function submit() {
        var checkID = [];//定义一个空数组
        var totalprice = $("#totalprice").html()
        console.log(totalprice)

       $("input[name='box1']:checked").each(function(i){//把所有被选中的复选框的值存入数组
            checkID[i] =$(this).val();
            console.log(checkID[i])
       });
        var checkList = checkID.join(',')
        console.log(checkList)
       if(checkID.length==0){
           alert("请选择购买商品")
           return;
       }

        $.ajax({
            url:"http://localhost:8888/pharmacy/cart/save?checkList="+checkList,
            type:"POST",
            //data->解析之后的json数据
            success:function (data) {
                if (data.code == 0){
                    window.location.href="http://localhost:8888/pharmacy/index/login"
                } else if(data.code == 1){
                    alert(data.msg + "库存不足")
                } else {
                    window.location.href="http://localhost:8888/pharmacy/cart/cartOrder?checkList="+checkList+"&totalprice=" +totalprice
                }
            }
        })
    }



    function fixed(totalprice) {
        total = total.toFixed(2)
        return total;
    }




</script>


<script type="text/javascript">

    function checkbox(obj){
        // 选中
       if(obj.checked){
            console.log("true")
       } else {
           // 没选中
           console.log("false")
       }

        var boolall=true;
        var is=document.getElementById('box');//获取全选的复选框
        var iss=document.getElementsByName('box1');//下面所有的复选框
        var ass=document.getElementById('as');
        //循环下面所有复选框,将所有复选框都选中
            for(var i=0;i<iss.length;i++) {
                if(iss[i].checked==false){
                    boolall = false;
                    break;
                }
            }
        if(boolall == true){
            ass.innerHTML='&nbsp;&nbsp;取消全选';//选中后将SPAN中的内容改为取消全选
            is.checked = true;
        } else {
            ass.innerHTML='&nbsp;&nbsp;全选';//选中后将SPAN中的内容改为取消全选
            is.checked = false;
        }
        reloadTotal()
    }

    function my(){

        var is=document.getElementById('box');//获取全选的复选框
        var em=is.checked;//判断复选框的选中状态
        var iss=document.getElementsByName('box1');//下面所有的复选框
        var ass=document.getElementById('as');
        if(em){//如果全选复选框是false 则执行下面代码
            for(var i=0;i<iss.length;i++){ //循环下面所有复选框,将所有复选框都选中
                iss[i].checked=true;
            }
            ass.innerHTML='&nbsp;&nbsp;取消全选';//选中后将SPAN中的内容改为取消全选
        }else{
            for(var i=0;i<iss.length;i++){
                iss[i].checked=false;
            }
            ass.innerHTML='&nbsp;&nbsp;全选';
        }
        reloadTotal()
    }
</script>


</body>
</html>
